<!--首页-->
<script setup>
import router from "@/router";
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";

const newsIndex = ref(1)

const carousel = ref()

const carouselIndex = ref(0)

const carouselChange =(curIndex,preIndex)=>{
  carouselIndex.value = curIndex;
}

const setActiveItem =(index)=>{
  carousel.value.setActiveItem(index)
}

//1.定义三个数组装二级分类
const recipeCatArr = ref([]);
const videoCatArr = ref([]);
const infoCatArr = ref([]);
//定义轮播图数组
const bannerArr = ref([]);

//4.准备3个内容数组
const recipeArr = ref([]);
const videoArr = ref([]);
const infoArr = ref([]);
</script>

<template>
  <div style="max-width: 1920px;margin: 0 auto;">
    <div style="max-width: 1920px;height: 450px;position: relative;margin: auto;padding: 0">
      <!---------------------轮播图开始-------------------------->
      <div id="app" style="width: 100%;height: 450px;">
        <div class="box2-banner" style="width: 100%;height: 450px;">
          <el-carousel ref="carousel" height="340px" @change="carouselChange" arrow="never" motion-blur indicator-position="none" style="height: 450px;">
            <el-carousel-item v-for="item in 4" :key="item"
                              :style="{width:'100%',height:'450px','background-image':'url(/imgs/banner'+item+'.jpg)','background-position':'center top'}"
            >
            </el-carousel-item>
          </el-carousel>

          <div class="indicator" style="">
            <a @click="setActiveItem(0)" :class="{'active': carouselIndex===0}">青藏 高原列车</a>
            <a @click="setActiveItem(1)" :class="{'active': carouselIndex===1}">漫步英国</a>
            <a @click="setActiveItem(2)" :class="{'active': carouselIndex===2}">品质新生 聚势欧洲</a>
            <a @click="setActiveItem(3)" :class="{'active': carouselIndex===3}">企业定制</a>
          </div>
        </div>
      </div>
      <!---------------------轮播图结束-------------------------->
      <div style="
           position: absolute;
           left: 50%;
           margin-left: -590px;
           top: 0;
           z-index: 100;
      ">
        <div v-for="i in 7"
           style="width: 230px;
           height: 43.5px;
           overflow: hidden;
           border-bottom: 1px #999 dashed;
           padding: 10px;
           background-color: #fff;
           position: relative;
      ">
          <img :src="'/imgs/region'+i+'.png'" alt="" style="position: absolute;top: 50%;transform: translate(0%, -50%);">
          <div style="position: absolute;left: 50px;">
            <a href="#" class="category" style="font-size: 16px;color: #ea1a56;">欧洲</a>
            <br>
            <a href="#" class="category" v-for="i in 4" style="font-size: 12px;color: #333;margin-right: 10px;">英国</a>
          </div>
          <a href="#" class="category" style="color: #333333;position: absolute;top: 50%;transform: translate(0%, -50%);right: 10px;">
            <el-icon><ArrowRight /></el-icon>
          </a>
        </div>
      </div>
    </div>
    <div style="width: 1200px;margin: auto;">
      <!--7天以内假期 部分开始-->
      <el-row :gutter="10" style="background-color: #fff; margin-top: 10px;">
        <el-col :span="3">
          <p style="font-size: 16px;margin: 10px;line-height: 40px;">7天以内假期</p>
        </el-col>
        <el-col :span="21">
          <el-menu mode="horizontal" active-text-color="orange" default-active="0" @select="selectInfo">
            <el-menu-item index="0">全部</el-menu-item>
            <el-menu-item v-for="c in infoCatArr" :index="c.id">{{c.name}}</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <div class="layout">
        <div style="width: 300px;">
          <router-link to="/reg">
            <img src="/imgs/7less.jpg" alt="" style="height: 100%;">
          </router-link>
        </div>
        <el-row :gutter="10" class="right">
          <el-col :span="8" v-for="item in 4" style="margin-top: 10px;">
            <el-card>
              <router-link to="#" style="text-decoration: none; color: #333;">
                <img src="/imgs/test.jpg" style="width: 100%;height: 150px;">
                <p style="height: 20px;font-size: 14px">111</p>
                <span style="float: left;font-size: 12px;">北京出发</span>
                <span style="float: right;margin-bottom: 10px;">￥8888起</span>
              </router-link>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--7天以内假期 部分结束-->
      <!--8-10天假期 部分开始-->
      <el-row :gutter="10" style="background-color: #fff; margin-top: 10px;">
        <el-col :span="3">
          <p style="font-size: 16px;margin: 10px;line-height: 40px;">8-10天假期</p>
        </el-col>
        <el-col :span="21">
          <el-menu mode="horizontal" active-text-color="orange" default-active="0" @select="selectInfo">
            <el-menu-item index="0">全部</el-menu-item>
            <el-menu-item v-for="c in infoCatArr" :index="c.id">{{c.name}}</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <div class="layout">
        <div style="width: 300px;">
          <router-link to="/reg">
            <img src="/imgs/8-10.jpg" alt="" style="height: 100%;">
          </router-link>
        </div>
        <el-row :gutter="10" class="right">
          <el-col :span="8" v-for="item in 4" style="margin-top: 10px;">
            <el-card>
              <router-link to="#" style="text-decoration: none; color: #333;">
                <img src="/imgs/test.jpg" style="width: 100%;height: 150px;">
                <p style="height: 20px;font-size: 14px">111</p>
                <span style="float: left;font-size: 12px;">北京出发</span>
                <span style="float: right;margin-bottom: 10px;">￥8888起</span>
              </router-link>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--8-10天假期 部分结束-->
      <!--11-14天假期 部分开始-->
      <el-row :gutter="10" style="background-color: #fff; margin-top: 10px;">
        <el-col :span="3">
          <p style="font-size: 16px;margin: 10px;line-height: 40px;">11-14天假期</p>
        </el-col>
        <el-col :span="21">
          <el-menu mode="horizontal" active-text-color="orange" default-active="0" @select="selectInfo">
            <el-menu-item index="0">全部</el-menu-item>
            <el-menu-item v-for="c in infoCatArr" :index="c.id">{{c.name}}</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <div class="layout">
        <div style="width: 300px;">
          <router-link to="/reg">
            <img src="/imgs/11-14.jpg" alt="" style="height: 100%;">
          </router-link>
        </div>
        <el-row :gutter="10" class="right">
          <el-col :span="8" v-for="item in 4" style="margin-top: 10px;">
            <el-card>
              <router-link to="#" style="text-decoration: none; color: #333;">
                <img src="/imgs/test.jpg" style="width: 100%;height: 150px;">
                <p style="height: 20px;font-size: 14px">111</p>
                <span style="float: left;font-size: 12px;">北京出发</span>
                <span style="float: right;margin-bottom: 10px;">￥8888起</span>
              </router-link>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--11-14天假期 部分结束-->
      <!--15-20天假期 部分开始-->
      <el-row :gutter="10" style="background-color: #fff; margin-top: 10px;">
        <el-col :span="3">
          <p style="font-size: 16px;margin: 10px;line-height: 40px;">15-20天假期</p>
        </el-col>
        <el-col :span="21">
          <el-menu mode="horizontal" active-text-color="orange" default-active="0" @select="selectInfo">
            <el-menu-item index="0">全部</el-menu-item>
            <el-menu-item v-for="c in infoCatArr" :index="c.id">{{c.name}}</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <div class="layout">
        <div style="width: 300px;">
          <router-link to="/reg">
            <img src="/imgs/15-20.jpg" alt="" style="height: 100%;">
          </router-link>
        </div>
        <el-row :gutter="10" class="right">
          <el-col :span="8" v-for="item in 4" style="margin-top: 10px;">
            <el-card>
              <router-link to="#" style="text-decoration: none; color: #333;">
                <img src="/imgs/test.jpg" style="width: 100%;height: 150px;">
                <p style="height: 20px;font-size: 14px">111</p>
                <span style="float: left;font-size: 12px;">北京出发</span>
                <span style="float: right;margin-bottom: 10px;">￥8888起</span>
              </router-link>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--15-20天假期 部分结束-->
      <!--21天以上假期 部分开始-->
      <el-row :gutter="10" style="background-color: #fff; margin-top: 10px;">
        <el-col :span="3">
          <p style="font-size: 16px;margin: 10px;line-height: 40px;">21天以上假期</p>
        </el-col>
        <el-col :span="21">
          <el-menu mode="horizontal" active-text-color="orange" default-active="0" @select="selectInfo">
            <el-menu-item index="0">全部</el-menu-item>
            <el-menu-item v-for="c in infoCatArr" :index="c.id">{{c.name}}</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <div class="layout">
        <div style="width: 300px;">
          <router-link to="/reg">
            <img src="/imgs/21over.jpg" alt="" style="height: 100%;">
          </router-link>
        </div>
        <el-row :gutter="10" class="right">
          <el-col :span="8" v-for="item in 4" style="margin-top: 10px;">
            <el-card>
              <router-link to="#" style="text-decoration: none; color: #333;">
                <img src="/imgs/test.jpg" style="width: 100%;height: 150px;">
                <p style="height: 20px;font-size: 14px">111</p>
                <span style="float: left;font-size: 12px;">北京出发</span>
                <span style="float: right;margin-bottom: 10px;">￥8888起</span>
              </router-link>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--21天以上假期 部分结束-->
    </div>
  </div>
</template>

<style scoped>
p{
  /*把单行文字超出部分替换为省略号*/
  white-space: nowrap;/*不换行*/
  overflow: hidden;/*溢出隐藏*/
  text-overflow: ellipsis;/*溢出添加省略号*/
}
/*--------------------------------------------*/
.box2-banner {
  position: relative;
  height: 100%;
  width: 100%;
  /*border: 1px solid red;*/
}
.indicator {
  position: absolute;
  left: 50%;
  margin-left: -344px;
  bottom: 0;
  width: 910px;
  background-color: rgba(0,0,0,.5);
  z-index: 99;
}
.indicator a {
  font-size: 12px;
  color: #000;
  display: block;
  float: left;
  width: 25%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.indicator a.active {
  color: #fff;
}
.right {
  flex: 2;
}
.layout {
  display: flex;
}
.category{
  text-decoration: none; /* 去掉下划线 */
}
/*--------------------------------------------*/
</style>